<template>
  <a-modal v-model:visible="visible" :title="modalTitle" width="35%" @ok="handleOk" @cancel="handleCancel">
    <a-form :model="formState" ref="formRef" :label-col="{ span: 5 }">
      <a-form-item label="分类名称" name="name" :rules="[{ required: true, message: '请输入分类名称' }]">
        <a-input v-model:value="formState.name" placeholder="请输入分类名称" />
      </a-form-item>
      <a-form-item label="副标题" name="content">
        <a-input v-model:value="formState.content" placeholder="请输入副标题" />
      </a-form-item>
      <a-form-item label="图片" name="img" :rules="[{ required: true, message: '请选择图片' }]">
        <a-form-item-rest>
          <app-upload :fileList="formState.img" :min="1" @upload-img="uploadImg" />
        </a-form-item-rest>
      </a-form-item>
      <a-form-item label="上级" name="pid" :rules="[{ required: true, message: '请选择上级' }]">
        <a-tree-select v-model:value="formState.pid" treeDefaultExpandAll style="width: 100%" :tree-data="treeData"
          allow-clear show-search placeholder="请选择上级" :field-names="{
            children: 'child',
            label: 'name',
            value: 'cate_id',
          }" />
      </a-form-item>
      <a-form-item label="排序" name="sort" :rules="[{ required: true, message: '请输入排序' }]">
        <a-input-number v-model:value="formState.sort" placeholder="请输入排序" style="width: 250px" />
      </a-form-item>
      <a-form-item label="类型" name="cate_type" :rules="[{ required: true, message: '请选择类型' }]">
        <a-radio-group v-model:value="formState.cate_type">
          <a-radio :value="1">自营商城</a-radio>
          <a-radio :value="2">兑换商城</a-radio>
          <a-radio :value="3">都有</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否首页" name="is_home" :rules="[{ required: true, message: '请选择' }]">
        <a-switch v-model:checked="formState.is_home" checked-children="是" un-checked-children="否" :checkedValue="1"
          :unCheckedValue="0" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { add, edit, treeCate, info } from "@/api/goods/cate";
const { visible, modalTitle } = useModal();

const emits = defineEmits(["model-success"]);
const formRef = ref();
let treeData = ref([]);

const formState = reactive({
  name: "",
  content: "",
  pid: 0,
  sort: 0,
  img: [],
  is_home: 0,
});
const show = (model) => {
  visible.value = true;
  modalTitle.value = model ? "编辑分类" : "新增分类";
  // 获取分类
  getAllCate();
  if (model && model.cate_id) {
    getDetails(model.cate_id);
  } else {
    resetForm({
      cate_id: null
    })
  }
};
const getDetails = (id) => {
  info({
    id: id,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data;
      resetForm(data);
      formState.img = formState.img
        ? [
          {
            url: formState.img,
          },
        ]
        : [];
    }
  });
};
const getAllCate = () => {
  treeCate().then((res) => {
    if (res.code == 0) {
      const data = res.data;
      treeData.value = data;
    }
  });
};
//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
const uploadImg = (val) => {
  formState.img = formState.img.concat(val);
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    const params = {
      ...formState,
      img: formState.img.length > 0 ? formState.img[0]?.url : "",
    };
    if (formState.cate_id) {
      edit({
        id: formState.cate_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    } else {
      //添加
      add({ ...params }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
const handleCancel = () => {
  formRef.value.resetFields();
};
defineExpose({
  show,
});
</script>